<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>YYQ博客在线编辑器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.8.18/dist/index.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vditor@3.8.18/dist/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
    <style>
@media (min-width: 1460px) {
    .container {
        width: 1460px
    }
}
.modal {
  display: block;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .15s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">YYQ博客在线编辑器</a>
        </div>
    </div>
</nav>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-default" @click="newPost">新博文</button>
            <button type="button" class="btn btn-default" @click="showChanges">提交</button>
            <button type="button" class="btn btn-default" @click="redeploy">重新部署</button>
            <a type="button" class="btn btn-default" href="https://hiyyq.cn" target='_BLANK'>博客首页</a>
            <a type="button" class="btn btn-default" href="https://hugoloveit.com/zh-cn/theme-documentation-extended-shortcodes/" target='_BLANK'>Shortcodes参考</a>
            <button type="button" class="btn btn-default" @click="soft_reset">更新编辑空间</button>
            <button type="button" class="btn btn-danger pull-right" @click="reset">重置编辑空间</button>

        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-12">
            <span class="label label-info" v-for="cate in categories" style="margin-left: 2px;margin-right: 2px">{{cate}}</span>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <a class="list-group-item" v-for="post in posts" :key="post.title" v-on:click="editPost(post.dirName)"
                   v-bind:class="{ 'active' : editingPostDirName==post.dirName }"
                >
                    {{post.title}}
                    <button type="button" class="close" v-on:click="deletePost(post.dirName)">&times;</button>
                </a>
            </div>
        </div>
        <div class="col-md-9">
            <div id="vditor"></div>
        </div>

        <div v-if="is_show_changes">
            <div class="modal" v-on:click.self="show_changes=false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" v-on:click="is_show_changes=false">&times;</button>
                            <h4 class="modal-title">当前所有改动</h4>
                        </div>
                        <div class="modal-body">
                            <ul>
                                <li v-for="change in changes">{{change}}</li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" v-on:click="is_show_changes=false">关闭</button>
                            <button type="button" class="btn btn-primary" @click="commit">提交变更</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
var vue = new Vue({
  el: '#app',
  data: {
    contentEditor: '',
    posts: [],
    editingPostDirName: '',
    is_show_changes: false,
    changes:[],
    categories:[],
    category:''
  },
  methods: {
    async commit() {
        await axios.post('/api/commit')
          .then(response => {
            this.is_show_changes=false
            alert('提交成功')
          })
          .catch(function (error) {
            errorHandler(error)
          });
    },
    redeploy() {
        axios.post('/api/redeploy')
          .then(response => {
            alert('重新部署成功')
          })
          .catch(function (error) {
            errorHandler(error)
          });
    },
    deletePost(dirName) {
        if(this.editingPostDirName==dirName){
            this.contentEditor.disabled()
        }
        axios.delete('/api/post/'+dirName)
          .then(response => {
            this.getPosts()
          })
          .catch(function (error) {
            errorHandler(error)
          });
    },
    showChanges() {
        axios.get('/api/posts/changes')
          .then(response => {this.changes=response.data;this.is_show_changes=true})
          .catch(function (error) {
            errorHandler(error)
          });
    },
    getCategories() {
        axios.get('/api/categories')
          .then(response => {this.categories=response.data})
          .catch(function (error) {
            errorHandler(error)
          });
    },
    async savePost() {
        if(!this.editingPostDirName){return}
        await axios.post('/api/post/'+this.editingPostDirName, this.contentEditor.getValue())
          .then(response => {})
          .catch(function (error) {
            errorHandler(error)
          });
    },
    async editPost(dirName) {
        // 切换前先保存当前正在编辑的内容
        await this.savePost();
        this.editingPostDirName=dirName;
        axios.get('/api/post/'+dirName)
          .then(response => this.createEditor(dirName, response.data))
          .catch(function (error) {
            errorHandler(error)
          });
        this.getCategories();
    },
    reset() {
		if (confirm("是否确定执行重置操作？") == true) {
             axios.post('/api/reset')
              .then(async response => {
                await this.getPosts();
                alert('重置成功')
              })
              .catch(function (error) {
                errorHandler(error)
              });
        }
    },
    soft_reset() {
		if (confirm("是否确定执行更新操作？") == true) {
             axios.post('/api/soft_reset')
              .then(async response => {
                await this.getPosts();
                alert('更新成功')
              })
              .catch(function (error) {
                errorHandler(error)
              });
        }
    },
    newPost() {
        axios.post('/api/post/create')
          .then(async response => {
            await this.getPosts();
            this.editPost(response.data.dirName);
          })
          .catch(function (error) {
            errorHandler(error)
          });
    },
    async getPosts () {
     await axios.get('/api/posts')
          .then(response => this.posts=response.data)
          .catch(function (error) {
            errorHandler(error)
          });
    },
    createEditor(dirName,rawMd){
        this.contentEditor = new Vditor('vditor', {
          height: 1000,
          toolbarConfig: {
            pin: true,
          },
          cache: {
            enable: false
          },
          after: () => {
            this.contentEditor.setValue(rawMd);
          },
          preview: {
           markdown: {
            linkBase: dirName
           }
          },
          upload:{
            url: "/upload",
            fieldName: "files",
            max: 20 * 1024 * 1024,
            extraData: {
                belongDirName: dirName
            }
          },
          blur: function(){
            // vue.savePost()
          },
          input: () => {
            // 当输入完后大约2秒后，保存当前文章到本地缓存和服务端
            vue.savePost()
          }
        });
    }
  },
  mounted () {
    // 页面打开时刷新文章列表
    this.$nextTick(function(){
        this.getPosts()
        this.getCategories()
    })
  },
})

function errorHandler(error) {
    alert(error)
}
</script>
</html>
